<template>
  <div class="main">
    <div class="banner">
      <img src="../assets/images/gsjj-banner.png" alt="" />
      <!-- 搜索框 -->
      <div class="search">
        <input
          type="text"
          placeholder="输入职位进行查询"
          v-model="keyword"
          @keyup.enter="search"
        />
        <img
          src="../assets/images/serach.png"
          alt=""
          srcset=""
          @click="search"
        />
      </div>
    </div>
    <!-- 正文 -->
    <div class="center">
      <div class="lf">
        <div class="title">
          <h1>筛选</h1>
          <span @click="resetChecked">清除</span>
        </div>
        <div class="tit">职位类别</div>
        <el-tree
          show-checkbox
          node-key="id"
          ref="jobCategoryTree"
          :data="jobCategoryData"
          :props="defaultProps"
          :check-strictly="true"
          @check-change="checkChangeJobCategory"
        >
        </el-tree>
        <div class="tit">城市</div>
        <el-tree
          :data="cityData"
          show-checkbox
          node-key="id"
          ref="cityTree"
          :props="defaultPropsCity"
          @check-change="checkChangeCity"
        >
        </el-tree>
        <!-- <div class="more"><span>+</span>更多</div> -->
      </div>
      <div class="rt">
        <h1>开启新工作({{ total }})</h1>
        <div class="list">
          <!-- <router-link
            class="item"
            v-for="(item, index) in 6"
            :key="index"
            to="./socialRecruitmentDetail?id=" + index
          > -->
          <router-link
            class="item"
            v-for="(item, index) in jobData"
            :key="index"
            :to="{ name: 'socialRecruitmentDetail', query: { id: item.id } }"
          >
            <div class="title">{{ item.title }}</div>
            <div class="desc">
              {{ item.area }}
              <!-- Ⅰ研发–前端Ⅰ社招 -->
            </div>
            <div class="cont" v-html="item.content"></div>
          </router-link>
          <!-- 分页 -->
          <el-pagination
            layout="sizes, prev, pager, next, jumper"
            :page-size="limit"
            :page-sizes="[10, 30, 50, 100, 200]"
            :total="total"
            :current-page.sync="currentPage"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jobData: [], // 列表
      jobCategoryData: [],
      defaultProps: {
        children: "list",
        label: "label",
      },
      defaultPropsCity: {
        label: "area",
      },
      cityData: [],
      currentPage: 1, // 第几页
      page: 1, // 页数
      limit: 10, // 每页条数
      total: 0, // 总页数
      category_1: 0, // 一级分类集合
      category_2: 0, // 二级分类集合
      area: "", // 城市地区
      keyword: "", // 关键字
    };
  },
  created() {
    this.$http.getJobCategory().then((res) => {
      if (res.data.code === 0) {
        this.jobCategoryData = res.data.data;
      } else {
        this.$message.error("请求失败，请重试！");
      }
    });
    this.$http.getJobArea().then((res) => {
      if (res.data.code === 0) {
        this.cityData = res.data.data;
      } else {
        this.$message.error("请求失败，请重试！");
      }
    });
    this.init(
      this.page,
      this.limit,
      this.category_1,
      this.category_2,
      this.area,
      this.keyword
    );
  },
  methods: {
    // 列表数据加载
    init(page, limit, category_1, category_2, area, keyword) {
      this.$http
        .getJob({
          page: page,
          limit: limit,
          category_1: category_1,
          category_2: category_2,
          area: area,
          keyword: keyword,
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.jobData = res.data.data;
            this.total = res.data.total;
          } else {
            this.$message.error("请求失败，请重试！");
          }
        });
    },
    // 分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.init(
        val,
        this.limit,
        this.category_1,
        this.category_2,
        this.area,
        this.keyword
      );
    },
    // 搜索
    search() {
      if (this.keyword.trim().length <= 0) {
        this.$message.error("搜索词不能为空！");
      } else {
        this.init(
          this.page,
          this.limit,
          this.category_1,
          this.category_2,
          this.area,
          this.keyword
        );
      }
    },
    // 清空筛选
    resetChecked() {
      this.$refs.jobCategoryTree.setCheckedKeys([]);
      this.$refs.cityTree.setCheckedKeys([]);
      this.category_1 = 0;
      this.category_2 = 0;
      this.area = "";
      this.init(
        this.page,
        this.limit,
        this.category_1,
        this.category_2,
        this.area,
        this.keyword
      );
      this.currentPage = 1
    },
    // 职位类别筛选
    checkChangeJobCategory(data, checked) {
      if (checked) {
        const arr = [data.id];
        this.$refs.jobCategoryTree.setCheckedKeys(arr);
        if (data.parent_id === 0) {
          this.category_1 = data.id;
          this.category_2 = "";
        } else {
          this.category_1 = data.parent_id;
          this.category_2 = data.id;
        }
        this.init(
          this.page,
          this.limit,
          this.category_1,
          this.category_2,
          this.area,
          this.keyword
        );
      }
    },
    // 城市筛选
    checkChangeCity(data, checked) {
      if (checked) {
        const arr = [data.id];
        this.$refs.cityTree.setCheckedKeys(arr);
        this.area = data.area;
        this.init(
          this.page,
          this.limit,
          this.category_1,
          this.category_2,
          this.area,
          this.keyword
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.banner {
  max-width: 1920px;
  height: 700px;
  position: relative;
  img {
    height: 100%;
    width: 100%;
  }
}
.search {
  width: 636px;
  height: 44px;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: absolute;
  left: 50%;
  margin-left: -318px;
  bottom: -22px;
  input {
    width: 582px;
    height: 44px;
    border: none;
    outline: none;
    padding: 0 40px;
    font-size: 20px;
  }
  input::-webkit-input-placeholder {
    color: #cccccc;
    font-size: 20px;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cccccc;
    font-size: 20px;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cccccc;
    font-size: 20px;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cccccc;
    font-size: 20px;
  }
  img {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
}
.center {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 0;
  display: flex;
  justify-content: space-between;
  .lf {
    width: 230px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      border-bottom: solid 1px #cccccc;
      padding: 13px 0;
      h1 {
        font-size: 32px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }
      span {
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        cursor: pointer;
      }
    }
    .tit {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      padding-top: 40px;
      padding-bottom: 30px;
    }
    .more {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 40px;
      color: #2a3444;
      padding-left: 24px;
      span {
        font-size: 24px;
      }
    }
    ::v-deep {
      .el-tree {
        background: none;
        .el-tree-node__label {
          font-size: 18px;
        }
        .el-tree-node__content {
          margin-bottom: 10px;
        }
        .el-tree-node__expand-icon {
          font-size: 16px;
        }
        .el-checkbox__inner::after {
          width: 4px;
          height: 10px;
          left: 6px;
          top: 2px;
        }
        .el-checkbox__inner::before {
          top: 8px;
        }
        .el-checkbox__inner {
          width: 20px;
          height: 20px;
          border-radius: 0;
          border-color: #333333;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background: #333333;
        }
        .el-tree-node__expand-icon {
          color: #707070;
        }
      }
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content {
        background-color: #ececec;
      }
      .el-checkbox-group {
        .el-checkbox__inner {
          width: 20px;
          height: 20px;
        }
        .el-checkbox {
          width: 100%;
        }
      }
    }
  }
  .rt {
    width: 887px;
    h1 {
      font-size: 36px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
      margin-bottom: 64px;
    }
    .list {
      .item {
        display: inline-block;
        font-family: PingFang SC;
        font-weight: Regular;
        line-height: 50px;
        margin-bottom: 40px;
        .title {
          font-size: 32px;
          color: #333;
        }
        .desc {
          font-size: 24px;
          color: #666666;
        }
        .cont {
          font-size: 24px;
          color: #999999;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
      ::v-deep {
        .el-pagination {
          font-family: PingFang SC;
          text-align: right;
          .btn-next,
          .btn-prev,
          .el-dialog,
          .el-pager li,
          .btn-next .el-icon,
          .btn-prev .el-icon {
            background: none;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
          }
          .el-pager li.active {
            font-size: 24px;
            font-weight: bold;
            color: #2a3444;
          }
        }
      }
    }
  }
}
</style>
